<template>
  <section style="min-width:1300px">

    <enHeader :bannerShow="0"></enHeader>
    <div class="banner"
         v-if="bannerShow&&showMenu!=1">
      <div class="imgbox"
           v-if="bannerShow&&bannerList&&bannerList.length>0">
        <img class="img"
             v-for="(item,index) in bannerList"
             :key="index"
             :class="{'im':current===index,'cursor':!!bannerList[current].linkUrl}"
             :src="item.url"
             @click="imgUrl(bannerList[current])"
             width="100%"
             height="500px" />
      </div>

      <img class="change pre"
           v-if="bannerShow&&bannerList&&bannerList.length>1"
           @click="prefn"
           src="./../../image/pic7.png">
      <img class="change next"
           v-if="bannerShow&&bannerList&&bannerList.length>1"
           @click="nextfn"
           src="./../../image/pic10.png">
    </div>
    <div class="container">
      <enAside :pid="pid"
               v-if="!!leftShow&&showMenu!=1"></enAside>
      <div class="r">
        <enAside :pid="pid"
                 class="topShow"
                 v-if="!!topShow&&showMenu!=1"
                 :topShow="topShow"></enAside>
        <enBread ref="mychild"
                 :bread="bread"></enBread>
        <div class="list"
             v-if="showStatus==2&&!articleId">
          <ul>
            <li v-for="(item,i) in jobInfo.departmentList"
                @click="jobActive(i,item)"
                :class="{'jobactive': jobClickIndex==i}"
                :key="i">{{item.department}}</li>
          </ul>
          <el-table :data="jobTable"
                    border
                    @row-click="list2Click"
                    style="width: 100%">
            <el-table-column prop="jobName"
                             width="482"
                             align="center"
                             label="Job title">
            </el-table-column>
            <el-table-column prop="partmentName"
                             label="Department name"
                             align="center"
                             width="199">
            </el-table-column>
            <el-table-column prop="workPlace"
                             width="199"
                             align="center"
                             label="Working place">
            </el-table-column>
            <el-table-column prop="updateTime"
                             :formatter="time"
                             align="center"
                             label="Release time">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="page"
                         :page-size="10"
                         class="pagination"
                         layout="prev, pager, next, jumper"
                         :total="total">
          </el-pagination>

        </div>
        <!-- <div class="common0"
             v-if="showStatus==2&&articleId">
          <p class="textTitle">{{articleTitle}}</p>
          <div v-html="articleDetail"></div>
        </div> -->
        <div class="list list2"
             v-if="showStatus==3&&!articleId&&thirdTypeInfo&&thirdTypeInfo.directoryList&&thirdTypeInfo.directoryList.list&&thirdTypeInfo.directoryList.list">
          <el-table :data="thirdTypeInfo.directoryList.list"
                    border
                    @row-click="list2Click"
                    style="width: 100%">
            <el-table-column prop="articleName"
                             width="700"
                             style="padding-left:30px"
                             align="left"
                             label="Disclaimer Title">
            </el-table-column>
            <el-table-column prop="updateTime"
                             :formatter="time"
                             align="center"
                             label="Release time">
            </el-table-column>
          </el-table>
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="page"
                         :page-size="10"
                         class="pagination"
                         layout="prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
        <div class="common0"
             v-if="!!articleDetail">
          <p class="textTitle">{{articleTitle}}</p>
          <div class="ql-snow ql-editor"
               v-html="articleDetail"></div>
        </div>
      </div>
    </div>
    <enFooter></enFooter>
  </section>
</template>

<script>

import { Table, TableColumn, Pagination } from 'element-ui'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: "common",
  data () {
    return {
      currentPage: 0,
      showStatus: null,
      templateId: "",
      entityId: "",
      jobInfo: {
        pageJobInfo: {
          list: [],
        }
      },
      page: 1,
      jobClickIndex: null,
      jobTable: [],
      searchJobId: "",
      total: 0,
      tmp0Info: {},
      articleDetail: "",
      articleTitle: "",
      thirdTypeInfo: {
        directoryList: {
          list: []
        }
      },
      articleId: "",
      loading: false,
      activeIndex: "1",
      bannerList: [],
      autoplay: null,
      current: 0,
      leftShow: false,
      topShow: false,
      bannerShow: false,
      books2: "",
      ids: "",
      pid: "",
      bread: "",
      showMenu: true
    };
  },
  watch: {
    $route (v, vv) {
      this.topShow = false;
      this.bannerShow = false;
      this.leftShow = false;
      this.articleDetail = ""
      this.articleTitle = ""
      this.ids = ""
      this.pid = ""
      this.bread = ""
      this.showMenu = true
      this.commonQuery(v)
    },
    bannerList (v, vv) {
      if (!!v && v.length > 0) {
        this.autoplay = setInterval(() => {
          let tempindex = this.current + 1;
          this.current = tempindex > (v.length - 1) ? 0 : tempindex;
        }, 5000)
      }
    }
  },
  components: {
    elTable: Table,
    elTableColumn: TableColumn,
    elPagination: Pagination,
  },
  created () {
    this.commonQuery(this.$route, 1)
  },
  methods: {
    imgUrl (v) {
      if (!!v.linkUrl) {
        window.location.href = v.linkUrl
      }
    },
    commonQuery (v, vv) {
      this.entityId = v.query.entityId
      this.templateId = v.query.templateId
      this.showStatus = v.query.templateId
      this.articleId = v.query.articleId;
      this.ids = v.query.ids;
      this.pid = v.query.pid;
      this.bread = v.query.time
      this.showMenu = v.query.showMenu
      // this.getHomePageById()
      if (this.articleId) {
        this.articleDetailDo(this.articleId)
      } else {
        this.articleTitle = "";
        this.articleDetail = ""
      }
      this.type()
      if (vv != 1) {
        this.$refs.mychild.breadsShow();
      };


    },
    list2Click (row) {
      let url = window.location.origin + "/#/front/commons?templateId=" + this.templateId + "&entityId=" + this.entityId + "&articleId=" + row.articleId + "&from=article&time=" + new Date().getTime() + "&showMenu=1"
      window.open(url, "_blank");
    },
    type () {
      if (this.templateId == 2) {
        this.getJobEntityById()
        this.getDirectoryEntityById()
      } else if (this.templateId == 0) {
        this.getEntityById()
      } else if (this.templateId == 3 && !this.articleId) {
        this.getDirectoryEntityById()
      }
    },
    getDirectoryEntityById () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getDirectoryEntityById,
          mode: "post",
          data: {
            entityId: this.entityId,
            page: this.page
          }
        },
        function (suc) {
          self.thirdTypeInfo = suc.data;
          self.total = suc.data.directoryList.total;
          self.bannerList = suc.data.picUrl
          self.bannerShow = suc.data.bannerShow
          self.topShow = suc.data.topShow
          self.leftShow = suc.data.leftShow;
        },
        function (err) {

        }
      );
    },
    time (v) {
      return v.createTime.slice(0, 10)
    },
    handleCurrentChange (v) {
      this.page = v;
      if (this.templateId == 2) {
        if (this.searchJobId) {
          this.searchJobList()
        } else {
          this.getJobEntityById()
        }
      } else if (this.templateId == 3) {
        this.getDirectoryEntityById()
      }

    },
    handleSizeChange () {

    },
    searchJobList () {

    },
    jobActive (i, item) {
      this.jobClickIndex = i;
      this.searchJobId = item.id;
      this.pape = 1;
      this.searchJobList()
    },
    getJobEntityById () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getJobEntityById,
          mode: "post",
          data: {
            id: this.entityId,
            page: this.page
          }
        },
        function (suc) {
          self.jobInfo = suc.data
          self.jobTable = self.jobInfo.pageJobInfo.list
          self.total = self.jobInfo.pageJobInfo.total
          // self.leftShow = suc.data.commonDetail.leftShow
          // self.topShow = suc.data.commonDetail.topShow
          // self.bannerList = suc.data.commonDetail.picUrl
          // self.bannerShow = suc.data.commonDetail.bannerShow
        },
        function (err) {

        }
      );
    },
    searchJobList () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.searchJobList,
          mode: "post",
          data: {
            partmentId: this.searchJobId,
            page: this.page
          }
        },
        function (suc) {
          self.jobTable = suc.data.list;
          self.total = suc.data.total
        },
        function (err) {

        }
      );
    },
    getEntityById () {
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.getEntityById,
          mode: "post",
          data: {
            id: this.entityId
          }
        },
        function (suc) {
          self.tmp0Info = suc.data;
          self.leftShow = suc.data.leftShow
          self.topShow = suc.data.topShow
          self.bannerList = suc.data.picUrl
          self.bannerShow = suc.data.bannerShow
          // self.ids = suc.data.id
          self.articleDetailDo(suc.data.articleId)

        },
        function (err) {

        }
      );
    },
    nextfn () {
      let tempindex = this.current + 1;
      this.current = tempindex > (this.bannerList.length - 1) ? 0 : tempindex;
    },
    prefn () {
      let tempindex = this.current - 1;
      this.current = tempindex < 0 ? (this.bannerList.length - 1) : tempindex;
    },
    articleDetailDo (v) {
      this.loading = true
      let self = this
      Driver.proxy(
        "api",
        {
          apiPath: apiConfig.member.articleDetail,
          mode: "post",
          data: {
            id: v
          }
        },
        function (suc) {
          self.articleDetail = suc.data.content;
          self.articleTitle = suc.data.title;
          self.loading = false

        },
        function (err) {
          self.loading = false

        }
      );
    },
    // getHomePageById () {
    //   let self = this
    //   Driver.proxy(
    //     "api",
    //     {
    //       apiPath: apiConfig.member.getHomePageById,
    //       mode: "post",
    //       data: {

    //       }
    //     },
    //     function (suc) {
    //       self.bannerList = JSON.parse(suc.data.bannerList)
    //     },
    //     function (err) {

    //     }
    //   );
    // }
  }
};
</script>

<style lang="scss" scoped>
.topShow {
  padding-right: 20px;
  margin: 0 0 20px 0 !important;
  background: #f3e6e6;
  z-index: 100;
}
.pre {
  left: 9%;
}
.next {
  right: 9%;
}
.banner {
  width: 100%;
  height: 380px;
  img {
    height: 380px;
  }
  overflow: hidden;
  position: relative;
  .img {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    transition: opacity 1s linear;
    opacity: 0;
    filter: alpha(opacity=0);
  }
  .im {
    opacity: 100;
    filter: alpha(opacity=100);
  }
  .change {
    display: block;
    position: absolute;
    z-index: 20;
    // opacity: 0.4;
    transition: 0.4s;
    top: 60%;
    margin-top: -50px;
  }
  .change:hover {
    opacity: 1;
  }
}
.next,
.pre {
  z-index: 10;
  width: 20px !important;
  height: 40px !important;
  cursor: pointer;
  position: absolute;
  top: 175px;
}
.pointer {
  cursor: pointer;
}
.common0 {
  .textTitle {
    font-size: 20px;
    text-align: center;
    margin: 20px;
  }
}
.jobactive {
  color: #850c0c;
}
.container {
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  padding: 0 5%;
  box-sizing: border-box;
  display: flex;
  margin-top: 20px;
  min-height: 600px;
}
.r {
  width: 800px;
  flex: 1;
  .pagination {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }
}
.list {
  width: 100%;
  min-height: 500px;
  margin-top: 30px;
  ul {
    width: 420px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 600;
    li {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" >
.list2 tr th:first-of-type div {
  text-align: center !important;
}
.list2 td div,
.list td div {
  padding-left: 30px !important;
  cursor: pointer;
}
.r {
  th {
    background: #f3e6e6;
    color: black;
  }
  .el-pager {
    .active {
      color: #850c0c;
    }
  }
}
.list {
  tbody {
    .el-table__row .cell {
      font-size: 14px;
    }
  }
}
</style>